<template>
	<view>
		<uni-search-bar class="header-search" @confirm="search" :focus="false" v-model="searchValue" @blur="blur"
			@input="input" cancelButton="none" @clear="clear" placeholder="请输入城市名称">
		</uni-search-bar>
		<div>
			<div v-for="(prov,provIndex) in cityListPage" :key="provIndex">
				<div class="prov-name">·&nbsp;{{prov.cnName}}</div>
				<div class="city-table">
					<div v-for="(city , index) in prov.children" :key="index" class="city-obj"
						@click="openCitySencePage(city.adCode)">
						<image :src="city.img" class="city-image"></image>
						<div style="margin-left: 14rpx;">{{city.cnName}}</div>
					</div>
				</div>

			</div>

		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import uniRequest from '@/components/request.js';
	const cityListPage = ref([])
	onLoad((params) => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCityList',
			method: 'POST',
			data: {
				name: ""
			},
			success(res) {
				const records = res.data.data
				cityListPage.value = records
				console.log(cityListPage)
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	})
	let searchValue = ref("")
	// 搜索框
	const blur = (res) => {
		searchValue = res.value
		if (searchValue == null || searchValue == '') {
			return
		}
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCityList',
			method: 'POST',
			data: {
				name: searchValue
			},
			success(res) {
				const records = res.data.data
				cityListPage.value = records
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}
	const input = (res) => {
		console.log('----input:', res)
	}
	const search = (res) => {
		searchValue = res.value
		if (searchValue == null || searchValue == '') {
			return
		}
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCityList',
			method: 'POST',
			data: {
				name: searchValue
			},
			success(res) {
				const records = res.data.data
				cityListPage.value = records
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}
	const clear = (res) => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCityList',
			method: 'POST',
			data: {
				name: ""
			},
			success(res) {
				const records = res.data.data
				cityListPage.value = records
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}
	// 搜索框结束

	const openCitySencePage = (id) => {
		uni.navigateTo({
			url: "/attractionPages/sence/AttractionList?cityId=" + id
		})
	}
</script>

<style>
	.prov-name {
		margin-left: 40rpx;
		margin-top: 40rpx;
		color: brown;
		font-weight: 800;
		font-size: 30rpx;
	}

	.city-table {
		display: flex;
		flex-direction: row;
		margin-left: 6%;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.city-obj {
		text-align: center;
		margin-top: 10rpx;
	}

	.city-image {
		width: 300rpx;
		height: 260rpx;
		margin-left: 20rpx;
	}
</style>